<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>修改用户头像页面</title>
    <style>
         *{
            padding: 0;
            margin: 0;
        }
        .title{
            margin-left: 27rem;
            position: relative;
            margin-top: 39.5rem;
            display: flex;
            align-items: center;
        }
        .header-right{
            position: absolute;
            right: 0;
            margin-right: 41rem;
        }
        .pos{
            position: relative;
        }
        #header-img{
            border-radius: 50%;
            width: 27rem;
            height: 27rem;
            
        }
        .title span{
            font-size: 13rem;
        }
        .right{
            width: 7rem;
            height: 11rem;
            margin-right: 24rem;
            position: absolute;
            right: 0;
        }
        #docpicker{
            position: absolute;
            left: 0;
            width: 27rem;
            height: 27rem;
            border-radius: 50%;
            outline: none;
            filter: alpha(opacity=0);
            opacity: 0;
        }
        .name{
            position: absolute;
            right: 0;
            margin-right: 41rem;
            text-align: right;
            direction: rtl;
            color: #b1b0b0;
        }
    </style>
    <script>
        !function(n){
            var  e=n.document,
            t=e.documentElement,
            i=37500,
            d=i/100,
            o="orientationchange"in n?"orientationchange":"resize",
            a=function(){
                var n=t.clientWidth||320;n>720&&(n=720);
                t.style.fontSize=n/d+"px"
            };
            e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
        }(window);
    </script>
</head>
<body>
    <div class="title">
        <span>头像</span>
        <div class="header-right">
            <div class="pos">
                <img src="__CDN__/assets/images/头像.png" class="header" id="header-img">
                <input type="file" id="docpicker" accept="image/*" onchange="changepic(this)"  class="header">
            </div>
        </div>
        
        
        <img src="__CDN__/assets/images/右箭头-01.png" class="right">
    </div>
    <div class="title">
        <span>昵称</span>
        <div class="header name">Mr.1iu</div>
        <img src="__CDN__/assets/images/右箭头-01.png" class="right">
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
function changepic() {
    var reads= new FileReader();
    f=document.getElementById('docpicker').files[0];
    reads.readAsDataURL(f);
    reads.onload=function (e) {
        document.getElementById('header-img').src=this.result;
        $.ajax({
            //请求方式
            type : "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "http://app.aebrowser.cn/api/common/upload",
            dataType:'jsonp',
            //数据，json字符串
            data : {
                file:this.result
            },
            //请求成功
            success : function(result) {
                console.log(result);
            }
        });
    };
}
</script>
</html>